//
//  GuideView.swift
//  Chatup
//
//  Created by op on 2023/10/17.
//

import SwiftUI

struct GuideView1: View {
    @State private var isFlyingIn1 = false
    @State private var isFlyingIn2 = false

    var body: some View {
        VStack {
//            Spacer()
//                .frame(height: 40)
            ZStack(alignment: .topLeading) {
                Image("icon_some")
                    .frame(width: 9, height: 17)
                HStack {
                    Spacer()
                        .frame(width: 8)
                    Text(String.i18nText("intro1_personal_assistant"))
                        .font(.system(size: 24, weight: .bold))
                }
            }
            Spacer()
//                .frame(height: 50)
            HStack {
                ZStack {
                    Image("ic_bg_left")
                        .frame(width: 247, height: 106)
                    HStack {
                        Spacer().frame(width: 16)
                        VStack(alignment: .leading) {
                            Text(String.i18nText("intro1_writing"))
                                .font(
                                    Font.system(size: 18, weight: .black)
                                )
                                .foregroundColor(.white)
                            Spacer().frame(height: 8)
                            Text("· "+String.i18nText("intro1_writing_novel"))
                                .font(Font.system(size: 14))
                                .foregroundColor(.white.opacity(0.6))
                            Text("· "+String.i18nText("intro1_writing_lyrics"))
                                .font(Font.system(size: 14))
                                .foregroundColor(.white.opacity(0.6))
                        }
                        Spacer()
                        Image("ic_shou")
                        Spacer().frame(width: 16)
                    }.frame(width: 247, height: 106)

                }.offset(x: isFlyingIn1 ? 0 : -150)
                    .animation(.easeInOut(duration: 1.0))
                    .onAppear {
                        isFlyingIn1 = true
                    }

                Spacer()
            }
            Spacer()
                .frame(height: 20)
            HStack {
                Spacer()
                ZStack {
                    Image("ic_bg_right")
                        .frame(width: 247, height: 106)
                    HStack {
                        Spacer().frame(width: 16)
                        VStack(alignment: .leading) {
                            Text(String.i18nText("intro1_entertainment"))
                                .font(
                                    Font.system(size: 18, weight: .black)
                                )
                                .foregroundColor(.white)
                            Spacer().frame(height: 8)
                            Text("· "+String.i18nText("intro1_entertainment_game"))
                                .font(Font.system(size: 14))
                                .foregroundColor(.white.opacity(0.6))
                            Text("· "+String.i18nText("intro1_entertainment_jokes"))
                                .font(Font.system(size: 14))
                                .foregroundColor(.white.opacity(0.6))
                        }
                        Spacer()
                        Image("ic_youling")
                        Spacer().frame(width: 16)
                    }.frame(width: 247, height: 106)
                }
                .offset(x: isFlyingIn2 ? 0 : 150)
                .animation(.easeInOut(duration: 1.0))
                .onAppear {
                    isFlyingIn2 = true
                }
            }
            Spacer()
                .frame(height: 20)
            HStack {
                ZStack {
                    Image("ic_bg_left")
                        .frame(width: 247, height: 106)
                    HStack {
                        Spacer().frame(width: 16)
                        VStack(alignment: .leading) {
                            Text(String.i18nText("intro1_relationship"))
                                .font(
                                    Font.system(size: 18, weight: .black)
                                )
                                .foregroundColor(.white)
                            Spacer().frame(height: 8)
                            Text("· "+String.i18nText("intro1_relationship_girls"))
                                .font(Font.system(size: 14))
                                .foregroundColor(.white.opacity(0.6))
                            Text("· "+String.i18nText("intro1_relationship_thoughts"))
                                .font(Font.system(size: 14))
                                .foregroundColor(.white.opacity(0.6))
                        }
                        Spacer()
                        Image("ic_message")
                        Spacer().frame(width: 16)
                    }.frame(width: 247, height: 106)
                }
                .offset(x: isFlyingIn1 ? 0 : -150)
                .animation(.easeInOut(duration: 1.0))
                .onAppear {
                    isFlyingIn1 = true
                }
                Spacer()
            }
            Spacer()
                .frame(height: 80)
        }
        .padding()
    }
}

struct GuideView2: View {
    @State private var isFlyingIn1 = false
    @State private var isFlyingIn2 = false
    var body: some View {
        VStack {
            ZStack(alignment: .topLeading) {
                Image("icon_some")
                    .frame(width: 9, height: 17)
                HStack {
                    Spacer()
                        .frame(width: 8)
                    Text(String.i18nText("intro2_characters"))
                        .font(.system(size: 24, weight: .bold))
                }
            }
            Spacer()
//                .frame(height: 50)
            Image("icon_guide_2")
                .offset(y: isFlyingIn1 ? 0 : 250)
                .animation(.easeInOut(duration: 1.0))
                .onAppear {
                    isFlyingIn1 = true
                }
            Spacer()
                .frame(height: 40)
            VStack {
                Text(String.i18nText("intro2_characters_chat"))
                    .font(
                        Font.custom("SF Pro Display", size: 18)
                            .weight(.semibold)
                    )
                    .foregroundColor(Color(red: 0.15, green: 0.75, blue: 0.46))
                Spacer().frame(height: 16)
                HStack {
                    ZStack {
                        Text(String.i18nText("intro2_characters_famous"))
                            .font(Font.custom("SF Pro Display", size: 14))
                            .foregroundColor(.white)
                            .padding(.horizontal, 12)
                            .padding(.vertical, 8)
                            .background(Color(red: 0.85, green: 0.85, blue: 0.85).opacity(0.1))
                            .cornerRadius(30)
                    }
                    Spacer().frame(width: 8)
                    ZStack {
                        Text(String.i18nText("intro2_characters_anime"))
                            .font(Font.custom("SF Pro Display", size: 14))
                            .foregroundColor(.white)
                            .padding(.horizontal, 12)
                            .padding(.vertical, 8)
                            .background(Color(red: 0.85, green: 0.85, blue: 0.85).opacity(0.1))
                            .cornerRadius(30)
                    }
                }
                Spacer().frame(height: 8)
                ZStack {
                    Text(String.i18nText("intro2_characters_companion"))
                        .font(Font.custom("SF Pro Display", size: 14))
                        .foregroundColor(.white)
                        .padding(.horizontal, 12)
                        .padding(.vertical, 8)
                        .background(Color(red: 0.85, green: 0.85, blue: 0.85).opacity(0.1))
                        .cornerRadius(30)
                }
            }
            .opacity(isFlyingIn2 ? 1 : 0)
            .animation(.easeInOut(duration: 1.0))
            .onAppear {
                DispatchQueue.main.asyncAfter(deadline: .now()+1) {
                    isFlyingIn2 = true
                }
            }
            Spacer()
                .frame(height: 80)
        }
        .padding()
    }
}

struct GuideView3: View {
    @State private var isFlyingIn1 = false
    @State private var isFlyingIn2 = false
    var body: some View {
        VStack {
            ZStack(alignment: .topLeading) {
                Image("icon_some")
                    .frame(width: 9, height: 17)
                HStack {
                    Spacer()
                        .frame(width: 8)
                    Text(String.i18nText("feature_draw_imagination"))
                        .font(.system(size: 24, weight: .bold))
                }
            }
            Spacer()
//                .frame(height: 50)
            VStack{
                HStack{
                    ChatBubbleView(isVip: false, model: .init(isUser: true, messageType: .text, robotIcon: "", message: String.i18nText("intro0_draw_image"), isFinish: false, isStart: false), showToast: .constant(false))
                }.padding(.horizontal,20)
                    .padding(.top,16)
                Spacer().frame(height: 16)
                Image("intro0_draw_image")
                    .offset(y: isFlyingIn1 ? 0 : 250)
                    .animation(.easeInOut(duration: 1.0))
                    .onAppear {
                        isFlyingIn1 = true
                    }.padding(.bottom,16)
            }.background(
                Color(red: 0.85, green: 0.85, blue: 0.85).opacity(0.1)
            ).cornerRadius(12)
            
            Spacer()
                .frame(height: 80)
        }
        .padding()
    }
}

struct GuideView: View {
    @StateObject var viewModel = GuideViewModel()
    @State var showVip = false
    @State var currentIndex = 0
    @Binding var showGuidView: Bool
    @State private var selectedTab = 0
    let option1 = String.i18nText("terms_of_use")
    let option2 = String.i18nText("privacy_policy")
    var body: some View {
        GeometryReader(content: { proxy in
            let formattedString = String(format: NSLocalizedString("accept_terms", comment: ""), option1, option2)

            // 首先根据 option1 分割字符串，然后遍历结果并根据 option2 进一步分割
            let parts = formattedString.components(separatedBy: option1).flatMap { $0.components(separatedBy: option2) }
            ZStack {
                if currentIndex == 0 {
                    VStack {
                        Spacer()
                            .frame(height: 97)
                        Image("icon_icon2")
                            .resizable()
                            .frame(width: 107, height: 107)
                        Spacer()
                            .frame(height: 32)
                        VStack {
                            Text("Chat Up")
                                .font(
                                    Font.system(size: 24, weight: .bold)
                                )
                                .foregroundColor(.white)
                            Spacer().frame(height: 6)
                            Text(String.i18nText("powered_by_gpt"))
                                .font(
                                    Font.system(size: 16, weight: .medium)
                                )
                                .foregroundColor(.white.opacity(0.5))

                        }.frame(width: 174, height: 54)
                        Spacer()
                        HStack {
                            Spacer()
                            Image("icon_below_left")
                            Spacer().frame(width: 18)
                            VStack {
                                Text(String.i18nText("excellent"))
                                    .font(
                                        Font.system(size: 22, weight: .bold)
                                    )
                                    .foregroundColor(.white)
                                    
                                Image("icon_below_start")
                            }
                            Spacer().frame(width: 18)
                            Image("icon_below_right")
                            Spacer()
                        }.frame(height: 56)
                        Spacer()
                            .frame(height: 74)
                        Button {
                            currentIndex = 1
                            viewModel.logContinue()
                            viewModel.logshow1()
                        } label: {
                            ZStack {
                                Rectangle()
                                    .foregroundColor(.clear)
                                    .frame(width: 290, height: 60)
                                    .background(Color(red: 0.15, green: 0.75, blue: 0.46))
                                    .cornerRadius(12)

                                Text(String.i18nText("continue"))
                                    .font(
                                        Font.system(size: 18, weight: .bold)
                                    )
                                    .foregroundColor(.white)
                            }
                        }
                        Spacer()
                            .frame(height: 30)
                        Text(parts[0] + "\n").font(Font.custom("SF Pro Display", size: 14))
                            .foregroundColor(.white.opacity(0.5))
                        HStack{

                            Text(option1)
                                .font(Font.custom("SF Pro Display", size: 14))
                                .foregroundColor(Color(red: 0, green: 0.46, blue: 1))
                                .onTapGesture {
                                    viewModel.user()
                                }

                            Text(parts[1]).font(Font.custom("SF Pro Display", size: 14))
                                .foregroundColor(.white.opacity(0.5))

                            Text(option2)
                                .font(Font.custom("SF Pro Display", size: 14))
                                .foregroundColor(Color(red: 0, green: 0.46, blue: 1))
                                .onTapGesture {
                                    viewModel.privacy()
                                }

                            if parts.count > 2 {
                                Text(parts[2]).font(Font.custom("SF Pro Display", size: 14))
                                    .foregroundColor(.white.opacity(0.5))
                            }
                        }

                        Spacer()
                            .frame(height: 20)
                    }
                    .frame(width: proxy.size.width)
                } else {
                    VStack {
                        TabView(selection: $selectedTab) {
                            ForEach(0 ..< 3, id: \.self) { index in
                                if index == 0 {
                                    GuideView3().tag(0)
                                }
                                else if index == 1 {
                                    GuideView1()
                                        .tag(1)
                                } else {
                                    GuideView2()
                                        .tag(2)
                                }
                            }
                        }
                        .frame(height: proxy.size.height - 150)
                        .tabViewStyle(PageTabViewStyle())

                        Button {
                            if selectedTab == 0 {
                                selectedTab = 1
                                viewModel.logshow1()
                                viewModel.log0Continue()
                            } else if selectedTab == 1 {
                                selectedTab = 2
                                viewModel.logshow2()
                                viewModel.log1Continue()
                            }else {
                                viewModel.log2Continue()
                                showGuidView = true
                                viewModel.register()
                                
                                DispatchQueue.main.asyncAfter(deadline: .now()+1) {
                                    let viewControllerToPresent = UIHostingController(rootView: VipView(viewModel: .init(from: "first_start")))
                                    viewControllerToPresent.modalPresentationStyle = .fullScreen
                                    AppDelegate.shareInstance()?.getCurrentVC()?.present(viewControllerToPresent, animated: true)
                                }
                            }
                        } label: {
                            ZStack {
                                Rectangle()
                                    .foregroundColor(.clear)
                                    .frame(width: 290, height: 60)
                                    .background(Color(red: 0.15, green: 0.75, blue: 0.46))
                                    .cornerRadius(12)

                                Text(String.i18nText("continue"))
                                    .font(
                                        Font.system(size: 18, weight: .bold)
                                    )
                                    .foregroundColor(.white)
                            }
                        }
                    }
                }
            }

        })
    }
}

#Preview {
    GuideView(showGuidView: .constant(false))
}

